<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FlexJS</title>
<link rel="stylesheet" type="text/css" href="css/flex.css"  />
<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/flex.js" ></script>

<link rel="stylesheet" type="text/css" href="css/style.css"  />
<script type="text/javascript" src="js/common.js" ></script>
</head>
<body>
<div id="wrapper" class="ui-vgroup" data-width="100%" data-height="100%">
	<header class="ui-hgroup" data-width="100%" data-vertical-align="middle">
		<h1 class="ui-label">FlexJS</h1>
		<div class="ui-spacer" data-width="100%"></div>
		<div class="ui-button">Button</div>
	</header>
	<div class="ui-hgroup" data-width="100%" data-height="100%" style="background: #EEE;">
		<div class="ui-vgroup" data-width="300" data-height="100%" style="background: #DDD; border-right: 1px solid #999;">
			<div class="ui-hgroup" data-width="100%" style="padding: 5px; background: #CCC; border-bottom: 1px solid #999;">
				<div class="ui-button">Button</div>
				<div class="ui-spacer" data-width="100%"></div>
				<div class="ui-button">Button</div>
			</div>
			<div class="ui-group" data-width="100%" data-height="100%">
				<div class="ui-vgroup" data-width="100%" style="padding: 10px;">
					<div class="ui-button" data-width="100%">Button</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-button" data-width="100%">Button</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-button" data-width="100%">Button</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-button" data-width="100%">Button</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-button" data-width="100%">Button</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-button">Align: Left</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-vgroup" data-width="100%" data-horizontal-align="center">
						<div class="ui-button">Align: Center</div>
					</div>
					<div class="ui-vgroup" data-width="100%" data-horizontal-align="right" style="padding-top: 10px;">
						<div class="ui-button">Align: Right</div>
					</div>
					<div class="ui-spacer" data-height="10"></div>
					<div class="ui-button" data-width="100%">Button</div>
				</div>
			</div>
			<div class="ui-hgroup" data-width="100%" style="padding: 5px; background: #CCC; border-top: 1px solid #999;">
				<div class="ui-button">Button</div>
				<div class="ui-spacer" data-width="100%"></div>
				<div class="ui-button">Button</div>
			</div>
		</div>
		<div class="ui-vgroup" data-width="100%" data-height="100%" style="background: #FFF;">
			<div class="ui-hgroup" data-width="100%" data-vertical-align="middle" style="padding: 5px; background: #CCC; border-bottom: 1px solid #999;">
				<div class="ui-spacer" data-width="100%"></div>
				<div class="ui-label">Label (Selectable)</div>
				<div class="ui-spacer" data-width="10"></div>
				<div class="ui-text">Text (unselectable)</div>
				<div class="ui-spacer" data-width="100%"></div>
				<div class="ui-button">Button</div>
				<div class="ui-spacer" data-width="5"></div>
				<div class="ui-button">Button</div>
			</div>
			<div class="ui-group" data-width="100%" data-height="100%">
				<div class="ui-vgroup" data-width="100%" style="padding: 15px;">
					<p>ui-group, ui-hgroup, ui-vgroup, ui-label, ui-button, ui-spacer を class 属性に指定するだけ！</p>
					<p>あとは html5 の data-* 属性で幅／高さ等をセットすれば出来上がり。</p>
					<p style="margin-bottom: 50px;">当然 html や css はふつーに書けます。</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
					<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
					<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
					<p>ABCDEFGHIJKLM</p>
					<p>abcdefghijklm</p>
					<p>1234567890</p>
				</div>
			</div>
		</div>
	</div>
	<footer class="ui-hgroup" data-width="100%" data-vertical-align="middle">
		<p class="ui-label">Label Label Label</p>
		<div class="ui-spacer" data-width="100%"></div>
		<p class="ui-label"><- Spacer -></p>
		<div class="ui-spacer" data-width="100%"></div>
		<p id="copyright" class="ui-text">&copy; 2011 <a href="http://nariyu.jp/" target="_blank">nariyu.jp</a></p>
	</footer>
</div>
</body>
</html>